<!-- 储存空间 -->
<template>
  <div id="radar" style="width: 800px; height: 800px; margin: 20px"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      {
        name: '指标1',
        max: 50000,
        axisLabel: {
          show: true
        }
      },
      { name: '指标2', max: 50000 },
      { name: '指标3', max: 50000 },
      { name: '指标4', max: 50000 },
      { name: '指标5', max: 50000 },
      { name: '指标6', max: 50000 }
    ]
    // axisLabel: {
    //   show: true, // 是否显示刻度数值
    //   formatter: function (value) {
    //     // 使用函数模板格式化刻度数值
    //     return value; // 在数值后添加单位"kg"
    //   }
    // }
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4000, 4000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        }
      ]
    }
  ]
};
onMounted(() => {
  var chartDom = document.getElementById('radar');
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
</script>

<style lang="less" scoped></style>
